<template>
  <div class="app-container">
    <el-card shadow="never">
      <!-- 搜索 -->
      <el-form :inline="true" :model="ruleForm" class="demo-form-inline" ref='ruleForm'>
        <el-form-item label="标签名称" prop='user'>
          <el-input v-model="ruleForm.user"></el-input>
        </el-form-item>
        <el-form-item label="状态" prop='region'>
          <el-select v-model="ruleForm.region" placeholder="请选择">
            <el-option label="启用" value="false"></el-option>
            <el-option label="禁用" value="true"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button @click="resetForm('ruleForm')">清除</el-button>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
        <el-button class="filter-item fr" size="small" style="margin-left: 10px;" @click="xiugai(undefined)" type="primary" icon="el-icon-edit">新增用户</el-button>
      </el-form>
      <!-- 数据记录 -->
      <!-- <el-alert v-if="alertText !== ''" type="info" class="alert" :closable="false" show-icon>数据监控</el-alert> -->
      <el-alert :title="alertText" type="info" class="alert" :closable="false" show-icon></el-alert>

      <el-table :data="tableData" stripe style="width: 100%;">
        <el-table-column prop="item" type='index' label="序号" fit align="center">
        </el-table-column>
        <el-table-column prop="subjectName" label="所属学科" fit align="center">
        </el-table-column>
        <el-table-column prop="tagName" label="标签名称" fit align="center">
        </el-table-column>
        <el-table-column prop="username" label="创建者" fit align="center">
        </el-table-column>
        <el-table-column prop="addDate" label="创建日期" fit align="center">
        </el-table-column>
        <el-table-column prop="state" label="状态" fit align="center">
          <template v-slot="scope">
            <span v-if="scope.row.state==1">启用</span>
            <span v-else>禁用</span>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="address" label="操作">
          <template class="tag-group" v-slot="scope">
            <el-button type="text" @click="handleStatus(scope.row)">
              <span v-if="scope.row.state==0">启用</span>
              <span v-else>禁用</span>
            </el-button>
            <span class="jj-xiugai" v-if='scope.row.state==0'>
              <el-button type="text" @click="xiugai(scope.row)">
                修改
              </el-button>
              <el-button type="text" @click="shanchu(scope.row)">
                删除
              </el-button>
            </span>
            <span class="jj-xiugai" v-else>
              <el-button type="text" disabled>
                修改
              </el-button>
              <el-button type="text" disabled>
                删除
              </el-button>
            </span>
          </template>
        </el-table-column>
      </el-table>
      <!-- end -->
      <!-- 分页 -->
      <div class="pagination">
        <div class="pages">
          <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="Number(requestParameters.page)" :total="Number(total)" :page-size="Number(requestParameters.pagesize)" :page-sizes="[10,20,30, 50]" layout="sizes, prev, pager, next, jumper"></el-pagination>
        </div>
      </div>
      <!-- end -->
      <!-- 新增标签弹层 -->
      <!-- 新增修改插槽 -->
      <chacao-add ref="xinzeng" :data='xiugaiid'></chacao-add>
    </el-card>
  </div>
</template>
<script>
// import { status } from '@/api/hmmm/constants.js'
import { list, changeState, remove, } from '@/api/hmmm/tags.js'
import chacaoAdd from './../components/tags-add'
export default {
  components: {
    chacaoAdd
  },
  data () {
    return {
      xiugaiid: undefined,
      listLoading: true,
      alertText: '',
      total: 0,
      item1: {
        // 所属学科
        subjectName: '',
        // 标签名称
        tagName: '',
        // 创建者
        username: '',
        // 创建日期
        addDate: '',
        // 状态
        state: '',
        // 面试题数量
        totals: ''
      },
      params: {
        tagName: '',
        state: ''
      },
      requestParameters: {
        page: 1,
        pagesize: 10
      },
      ruleForm: {
        user: '',
        region: ''
      },
      tableData: [{
        // 所属学科
        subjectName: '',
        // 标签名称
        tagName: '',
        // 创建者
        username: '',
        // 创建日期
        addDate: '',
        // 状态
        state: '',
        // 面试题数量
        totals: ''
      }]
    }
  },
  methods: {
    // ==============================================================修改删除
    xiugai (item) {
      this.$refs.xinzeng.show = true
      if (item) {
        this.xiugaiid = item
      } else {
        this.xiugaiid = this.item1
      }
    },
    // 点击查询按钮函数
    onSubmit () {
      console.log('submit!')
      // 页面回到第一页
      this.requestParameters.page = 1
      // 打印一下搜索栏里面的类容
      // console.log(this.ruleForm)
      // 赋值到params
      this.params.tagName = this.ruleForm.user
      if (this.ruleForm.region === 'false') {
        this.params.state = 1
      } else if (this.ruleForm.region === 'true') {
        this.params.state = 0
      } else {
        if (this.params.tagName) {
          console.log(this.params)
          this.$delete(this.params, 'state')
          console.log(this.params)
        } else {
          this.getList()
          return
        }
      }
      // 打印params
      // console.log(this.params)
      this.chaxun(this.params)
      // this.getList(params)

    },
    // 获取列表数据
    async chaxun () {
      this.listLoading = true
      const { data: res } = await list(this.params)
      // 获取数据给dataList
      console.log(res)
      this.tableData = res.items
      // 获取总条数
      this.total = res.counts
      this.alertText = `共 ${this.total} 条记录`
      this.listLoading = false
      this.params.state = ''
    },
    //清除数据
    resetForm (formName) {
      this.$refs[formName].resetFields();
    },
    // 初始数据
    initialDate () {
      // 读取数据
      this.getList()
    },
    // 启用、禁用
    handleStatus (val) {
      var status = ''
      if (val.state === 1) {
        val.state = 0
        status = '禁用'
      } else {
        val.state = 1
        status = '启用'
      }
      console.log(val)
      var data = {
        id: val.id,
        state: val.state
      }
      this.$confirm('已成功' + status + ', 是否继续?', '提示', {
        type: 'warning'
      }).then(async () => {
        await changeState(data)
          .then(response => {
            this.$message.success('已成功' + status + '!')
            this.getList(this.requestParameters)
          })
          .catch(response => {
            this.$message.error(status + '失败!')
          })
      }).catch(() => {
        this.$message.info('已取消操作!')
      })
    },
    // 获取列表数据
    async getList (params) {
      this.listLoading = true
      const { data: res } = await list(this.requestParameters)
      // 获取数据给dataList
      console.log(res)
      this.tableData = res.items
      // 获取总条数
      this.total = res.counts
      this.alertText = `共 ${this.total} 条记录`
      this.listLoading = false
    },

    // ==================================删除
    shanchu (a) {
      console.log('删除')
      console.log(a)
      var data = {
        id: a.id,
      }
      console.log(data);
      this.$confirm('您确定要删除吗?', '提示', {
        type: 'warning'
      }).then(async () => {
        await remove(data)
          .then(response => {
            this.$message.success('已成功删除!!!!!!!')
            this.getList(this.requestParameters)
          })
          .catch(response => {
            this.$message.error('删除失败!哈哈哈哈')
          })
      }).catch(() => {
        this.$message.info('已取消操作!')
      })
    },
    // =========================================================================每页显示信息条数
    handleSizeChange (val) {
      this.requestParameters.pagesize = val
      if (this.requestParameters.page === 1) {
        this.getList(this.requestParameters)
      }
    },
    // 进入某一页
    handleCurrentChange (val) {
      this.requestParameters.page = val
      this.getList()
    }
    // ==================================================================
  },
  created () {
    this.initialDate()
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.jj-xiugai {
  padding-left: 8px;
}
</style>
